<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-24">
			<view class="u-font-bold u-font-34 u-p-t-10 u-m-l-15 u-m-b-30 u-color-darkBlue">转换能量：</view>
			<view class="recommend_box" v-for="item in recommendList" :key="item.id" @click="openBankChoose(item)">
				<view class="u-font-30 u-font-bold u-color-darkBlue">
					{{ item.name}}
				</view>
				<view class="u-font-26 u-flex">
					<view class="u-m-r-20 u-flex" v-if="item.check.name">
						<u-image
							:src="item.check.head_img"
							width="60rpx" height="60rpx" shape="circle" v-if="item.check.head_img"></u-image>
						<view class="u-m-l-20 u-font-bold">{{item.check.name}}</view>
					</view>
					<view class="u-m-r-20 u-color-gray" v-else>{{ item.desc }}</view>
					<view>></view>
				</view>
			</view>
		</view>
		<Bottom :isTwice="true" :rightText="'提交'" @confirm="bankConfirm"></Bottom>

		<!-- 选择弹出框 -->
		<u-popup v-model="popupData.show" mode="bottom" border-radius="20">
			<view class="checkBank_Box">
				<view class="u-font-32 u-font-bold u-m-l-10 u-color-darkBlue">添加平台用户</view>
				<view class="u-m-t-20">
					<u-search v-model="popupData.keyword" placeholder="请搜索关键词" :show-action="false" height="90"
						@search="searchBank" @clear="searchBank"></u-search>
					<scroll-view scroll-y="true" style="height: 700rpx;margin-top:10rpx; margin-bottom: 40rpx;"
						@scrolltolower="loadBank">
						<view class="slot-content">
							<view :class="item.check ? 'bank_check_box' : 'bank_box'" v-for="item in popupData.list"
								:key="item.id" @click="checkBank(item)">
								<u-image
									:src="item.head_img"
									width="70rpx" height="70rpx" shape="circle"></u-image>
								<view class="u-font-32 u-m-l-20">{{item.name}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="u-flex">
					<view class="addBtn" @click="closeBank">返回</view>
					<view class="bottomBtn" @click="confirmBank">保存</view>
				</view>
			</view>
		</u-popup>

		<!-- 通用提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirmText" :cancelText="modal.cancelText"
			:modalContent="modal.content" :showCancel="modal.showCancel" @cancel="modal.show = false"
			@confirm="modalConfirm">
		</Modal>

		<!-- 推荐来源选择框 -->
		<u-popup v-model="sourceShow" mode="center" border-radius="20" @close="sourceShow = false">
			<view class="u-p-30">
				<view class="u-flex u-row-between u-p-30 u-p-b-40 u-radius-20" style="background: #E6FFEA;"
					@click="onShareWeChat()">
					<button open-type="share" class="wechat">
						<view class="u-m-r-80">
							<view class="u-m-t-10 u-font-bold u-font-34 u-color-darkBlue">选择微信好友</view>
							<view class="u-m-t-15 u-font-30 u-color-gray">添加我的微信好友</view>
						</view>
						<u-icon name="weixin" custom-prefix="custom-icon" color="#39D457" size="108"></u-icon>
					</button>
				</view>
				<view class="u-flex u-row-between u-p-30 u-p-b-40 u-m-t-30 u-radius-20" style="background: #FFF3E5;"
					@click="onSharePlate()">
					<view class="u-m-r-80">
						<view class="u-m-t-10 u-font-bold u-font-34 u-color-darkBlue">选择平台用户</view>
						<view class="u-m-t-15 u-font-30 u-color-gray">添加来友/好友</view>
					</view>
					<u-icon name="haoyou-mianxing" custom-prefix="custom-icon" color="#FB751E" size="108"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import {
		phoneAreaCode,getShare
	} from '@/network/api.js'
	import {
		teaBankSearch,
		teaBankMobile,
		teaBankAdd
	} from '@/network/tea.js'
	import {
		generateUUID
	} from '@/utils/index.js'
	export default {
		components: {
			Navbar,
			Bottom,
			Modal
		},
		data() {
			return {
				recommendList: [],
				popupData: {
					show: false,
					id: 0, // 当前选中的列表id
					page: 1,
					limit: 10,
					keyword: '', // 搜索关键词
					list: [],
					check: {}, // 选中值
				},
				sourceShow: false,
				modal: {
					show: false,
					showCancel: true,
					confirmText: '确定',
					cancelText: '取消',
					content: ''
				},
				shareData:{},
				tea_id: 0,
				currentUUID: 0
			}
		},
		onLoad(options) {
			this.tea_id = options.id
			for (let i = 0; i < 3; i++) {
				const params = {
					id: i,
					type: 2,
					name: `推荐好友${i + 1}`,
					desc: '添加好友',
					check: {}
				}
				this.recommendList.push(params)
			}
			this.onGetShare()
		},
		methods: {
			onGetShare(){
				getShare({key:'bank'}).then(res=>{
					this.shareData = res.data
				})
			},
			openBankChoose(val) {
				this.popupData.id = val.id
				this.popupData.recommend_id = 0
				this.sourceShow = true
			},
			onShareWeChat() {
				const params = {
					id: generateUUID(),
					name: '微信好友'
				}
				this.recommendList.map(item => {
					if (item.id == this.popupData.id) {
						item.check = params
						item.check.type = 3
					}
				})
				this.currentUUID = params.id
				this.sourceShow = false
			},
			onSharePlate() {
				this.sourceShow = false
				this.popupData.page = 1
				this.popupData.list = []
				this.popupData.keyword = ''
				uni.showLoading({
					title: "加载中"
				})
				new Promise((resolve, reject) => {
					this.getBankFriend()
					resolve()
				}).then(() => {
					this.popupData.show = true
				})
			},
			getBankFriend() {
				const params = {
					tea_id: this.tea_id,
					user_id: uni.getStorageSync("user_id"),
					page: this.popupData.page,
					limit: this.popupData.limit,
					keyword: this.popupData.keyword
				}
				teaBankSearch(params).then(res => {
					if (res.data.list.length > 0) {
						res.data.list.map(item => {
							const {
								id,
								head_img,
								name
							} = item
							const params = {
								id: id,
								head_img: head_img,
								name: name,
								check: false
							}
							this.popupData.list.push(params)
						})
						uni.hideLoading()
					}
				})
			},
			searchBank() {
				this.popupData.page = 1
				this.popupData.list = []
				this.getBankFriend()
			},
			loadBank() {
				this.popupData.page++
				this.getBankFriend()
			},
			checkBank(val) {
				this.popupData.list.map(item => item.check = false)
				this.popupData.check = val
				val.check = true
			},
			closeBank() {
				this.popupData.page = 1
				this.popupData.keyword = ''
				this.popupData.list = []
				this.popupData.show = false
			},
			confirmBank() {
				this.recommendList.map(item => {
					if (item.id == this.popupData.id) {
						item.check = this.popupData.check
						item.check.type = 1
					}
				})
				this.popupData.show = false
			},
			bankConfirm() {
				this.modal.content = '保存后不可修改，是否确定保存？'
				this.modal.show = true
			},
			dealResultParams() {
				const result = {
					tea_id: this.tea_id,
					user_id: uni.getStorageSync("user_id"),
					params: []
				}
				this.recommendList.forEach(item => {
					if (item.check.id) {
						const params = {
							type: item.check.type,
							recommend_id: item.check.type == 1 ? item.check.id : '',
							uuid: item.check.type == 1 ? '' : item.check.id
						}
						result.params.push(params)
					}
				})
				result.params = JSON.stringify(result.params)
				teaBankAdd(result).then(res => {
					uni.navigateBack({
						delta: 1,
						success() {
							uni.$emit('update', {
								msg: '页面更新'
							})
						}
					})
				})
			},
			modalConfirm() {
				this.modal.show = false
				this.dealResultParams()
			}
		},
		onShareAppMessage() {
			const params = {
				uuid: this.currentUUID,
				inviterId: uni.getStorageSync("user_id")
			}
			return {
				title: `${this.shareData.title}`,
				path: `/operate/platformRecommend/platformRecommend?data=${JSON.stringify(params)}`,
				imageUrl: `${this.shareData.image}`,
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-list-item {
		background: #fff !important;
	}

	.recommend_box {
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 20rpx;
		margin-bottom: 25rpx;
	}

	.checkBank_Box {
		height: 1100rpx;
		padding: 30rpx 20rpx 50rpx 20rpx;
	}

	.bank_box {
		padding: 15rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #F3F4F6;
		display: flex;
		align-items: center;
	}

	.bank_check_box {
		padding: 15rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #B3723E;
		color: #fff;
		display: flex;
		align-items: center;
	}

	.area_box {
		width: 200rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #F3F4F6;
		border-radius: 50rpx;
		text-align: center;
	}

	.addBtn {
		flex: 1;
		height: 80rpx;
		background: #A7B0C0;
		color: #fff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		margin-right: 40rpx;
		border: 1rpx solid #ccc;
	}

	.bottomBtn {
		flex: 1;
		height: 80rpx;
		background: #B3723E;
		color: #fff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	.wechat {
		background: none;
		border: none;
		display: flex;
		padding: 0;
		margin: 0;
		line-height: inherit;
		text-align: inherit;
	}
	
	button::after{
		border: none;
	}
</style>